<template>
	<view>
		<mote-lines-divide :line="line" expandText="展开" foldHint="收起">
		    {{ intros }}
		</mote-lines-divide>
		
		<!-- 模仿淘宝滚动 -->
		<view class="scroll">
			<scroll-view class='scroll-x' scroll-x @scroll="scroll">
				<view class="list">
					<block v-for="item in 12" :key="item">
						<view class="lines">
							<view class="item">
								<image src="/static/logo.png" class="img" mode="widthFix"></image>
								<text>淘宝会员</text>
							</view>
							<view class="item">
								<image src="/static/logo.png" class="img" mode="widthFix"></image>
								<text>淘宝会员</text>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>
			<view class="dots">
				<text class="dot" :style="{transform: `translateX(${leftX})`}"></text>
			</view>
		</view>
	</view>
</template>

<script>
	import MoteLinesDivide from "@/components/mote-lines-divide/mote-lines-divide.vue"
	export default {
		data() {
			return {
				intros: `拥有财富、名声、权力，这世界上的一切的男人--哥尔·D·罗杰，在被行刑受死之前说了一句话，
				让全世界的人都涌向了大海。“想要我的宝藏吗？如果想要的话，那就到海上去找吧，我全部都放在那里。
				”，世界开始迎接“大海贼时代”的来临。拥有财富、名声、权力，这世界上的一切的男人 
				“海贼王”哥尔·D·罗杰，在被行刑受死之前说了一句话，让全世界的人都涌向了大海。
				“想要我的宝藏吗？如果想要的话，那就到海上去找吧，我全部都放在那里。”，
				世界开始迎接“大海贼时代”的来临。`,
				line: 3,
				
				leftX: 0,
				scrollwidth: 0,
				percent: 0,
				dotWidth: uni.upx2px(200) - uni.upx2px(50)
			}
		},
		components: {
			MoteLinesDivide
		},
		onReady() {
			const query = uni.createSelectorQuery().select('.scroll-x')
			query.fields({
			  size: true,
			  scrollOffset: true
			}, data => {
			  this.scrollwidth = data.scrollWidth - data.width
			}).exec();
		},
		methods: {
			scroll(e) {
				if(e.detail.scrollLeft>0){
					this.percent = e.detail.scrollLeft / this.scrollwidth
					this.leftX = this.dotWidth * this.percent + 'px'
				}else{
					this.leftX = 0
				}
				console.log(this.leftX, this.percent);
			}
		}
	}
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100%;
		background-color: #efefef;
	}
.scroll{
	margin: 50px 30rpx;
	padding: 0 16rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	padding-bottom: 30rpx;
	.scroll-x{
		white-space: nowrap;
		display: flex;
		.list{
			display: flex;
			padding-bottom: 30rpx;
			.lines{
				width: 25%;
				display: flex;
				flex-wrap: wrap;
				flex-direction: column;
				flex-shrink: 0;
				.item{
					// flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-top: 30rpx;
					.img{
						width: 80%;
						margin-bottom: 8rpx;
					}
					text{
						font-size: 24rpx;
						text-align: center;
					}
				}
			}
		}
	}
	.dots{
		height: 20rpx;
		width: 200rpx;
		background-color: #E5E5E5;
		margin: 15rpx auto 0;
		border-radius: 12rpx;
		position: relative;
		.dot{
			height: 20rpx;
			width: 50rpx;
			border-radius: 12rpx;
			background-color: #000;
			position: absolute;
			top: 0;
			transform: translateX(0);
		}
		
	}
}
</style>